<template>
  <div class="upload-wrapper">
    <div
      class="upload-list"
      v-for="(item, index) in imgList"
      :key="index + item"
      @click="showList(index)"
    >
      <span class="del-btn" @click.stop="removeItem(index)">x</span>
      <img :src="item" alt="" />
    </div>
    <div class="upload-add" @click="addFile">
      <i class="iconfont icon-add"></i>
      <img :src="image" alt="" />
    </div>
    <my-dialog v-model="isShow" :isMaskLayer="true" :maskHide="true">
      <div class="img-box">
        <!-- <div class="upload-item">
                    <input
                            type="file"
                            accept="image/*"
                            @change="getFile"
                            @click="isShow = !isShow"
                            capture="user"/>
                    拍照
                </div> -->
        <div class="upload-item">
          <input type="file" @change="getFile" @click="isShow = !isShow" />
          从相册选取
        </div>
      </div>
    </my-dialog>
    <my-dialog v-model="isShowList" :isMaskLayer="true" :maskHide="true">
      <my-swiper :defaultIndex="defaultIndex" pagingText="">
        <my-swiper-item
          class="item"
          :width="7.5"
          :height="'100%'"
          v-for="(item, index) in imgList"
          :key="index"
          ><img :src="item" alt=""
        /></my-swiper-item>
      </my-swiper>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from "./dialog";
import MySwiper from "../components/slider/mySwiper";
import MySwiperItem from "../components/slider/mySwiperItem";
import lrz from "../tools/lrz";

export default {
  name: "upload",
  components: {
    MyDialog,
    MySwiper,
    MySwiperItem,
  },
  data() {
    return {
      isShow: false,
      isShowList: false,
      defaultIndex: 1,
      imgList: [],
      image: "",
    };
  },
  props: {
    isList: {
      type: Boolean,
      default: true,
    },
    isLrz: {
      type: Object,
      default() {
        return {
          isLrz: false,
          H: 1000,
          W: 1000,
        };
      },
    },
  },
  methods: {
    addFile() {
      this.isShow = true;
    },
    getFileURL(file) {
      let getUrl = null;
      if (window.createObjectURL !== undefined) {
        getUrl = window.createObjectURL(file);
      } else if (window.URL !== undefined) {
        getUrl = window.URL.createObjectURL(file);
      } else if (window.webkitURL !== undefined) {
        getUrl = window.webkitURL.createObjectURL(file);
      }
      return getUrl;
    },
    getFile(obj) {
      let file = obj.target.files[0];
      if (this.image) {
        this.removeImg();
      }
      if (file && file.type.startsWith("image")) {
        this.fileUpload(file);
      } else {
        this.$toast.show("请上传正确图片文件！");
      }
    },
    async fileUpload(file) {
      let data = this.isLrz.isLrz ? await lrz.lrzImg(file) : file;
      this.$emit("request-img", data);
      let imageUrl = this.getFileURL(file);
      window.console.log(imageUrl);
      if (this.isList) {
        this.imgList.push(imageUrl);
        return;
      }
      this.image = imageUrl;
      // let res = await this.$request.post('/api/vue/upload/uploadImg', fileData)
      // if (res.data.status !== 1) return this.$myConfirm.show({title: '上传错误', content: res.data.data.code})
      // let result = res.data.data[0]
      // this.image = result
    },
    showList(index) {
      this.isShowList = true;
      this.defaultIndex = index;
    },
    removeItem(index) {
      this.imgList.splice(index, 1);
      this.$emit("remove-img", index);
    },
    removeImg() {
      this.$emit("remove-img");
    },
    showImg() {
      window.console.log(this.image);
    },
  },
  watch: {
    image() {
      this.showImg();
    },
  },
};
</script>

<style lang="less" scoped>
.upload-wrapper {
  display: flex;
  flex-wrap: wrap;
  .upload-add,
  .upload-list {
    display: inline-block;
    margin-bottom: 0.12rem;
    margin-right: 0.15rem;
    width: 1.58rem;
    height: 1.58rem;
    border: 0.03rem dashed #e5e5e5;
    border-radius: 0.1rem;
    position: relative;
    line-height: 1.58rem;
    text-align: center;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .icon-add {
      font-size: 0.8rem;
      color: #9a9a9a;
    }
    .del-btn {
      display: block;
      position: absolute;
      right: -0.13rem;
      top: -0.13rem;
      line-height: 0.26rem;
      height: 0.26rem;
      font-size: 0.3rem;
      color: #111;
      width: 0.26rem;
      /*border: 1px solid #445566;*/
      background: #e1e1e1;
      border-radius: 50%;
      z-index: 10;
    }
  }
  .img-box {
    overflow: hidden;
    background-color: #fff;
    width: 5.4rem;
    border-radius: 0.2rem;
    .upload-item {
      position: relative;
      height: 0.8rem;
      border-bottom: #eee solid 1px;
      line-height: 1rem;
      text-align: center;
      input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
      }
    }
  }
  .item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    /*padding: .5rem 0;*/
    img {
      width: 100%;
    }
  }
}
</style>
